<template>
  <div class="login">
    <!-- <div class="stars">
      <div v-for="(item,index) in starCount" :key="index" ref="star" class="star"></div>
    </div>-->

    <div class="login-box">
      <div class="avatar-box">
        <!-- 登录 -->
        <img src="../assets/logo.png" alt />
      </div>
      <div>
        <el-form
          ref="loginFormRef"
          :rules="rules"
          :model="loginForm"
          class="login-form"
          label-width="0"
        >
          <el-form-item prop="username">
            <el-input
              v-model="loginForm.username"
              placeholder="请输入用户名"
              prefix-icon="el-icon-user-solid"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              placeholder="请输入密码"
              type="password"
              prefix-icon="el-icon-s-goods"
            ></el-input>
          </el-form-item>
          <el-form-item class="btns">
            <el-button type="primary" @click="login()">确定</el-button>
            <el-button type="info" @click="resetForm()">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      starCount: 800, //星星数量
      distance: 800,
      loginForm: {
        username: "admin",
        password: "123456"
      },
      rules: {
        //验证规则
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          }
        ]
      }
    };
  },
  mounted() {
    let _this = this;
    let starsArr = _this.$refs.star;
    starsArr.forEach(item => {
      let speed = 0.2 + Math.random() * 1;
      let thisDistance = _this.distance + Math.random() * 300;
      item.style.transformOrigin = `0 0 ${speed}px`;
      item.style.transform = `translate3d(0,0,-${thisDistance}px) rotateY(${Math.random() *
        360}deg) rotateX(${Math.random * -50}deg) scale(${speed},${speed})`;
    });
  },

  methods: {
    //   重置表单
    resetForm() {
      //  获取引用对象
      console.log(this);
      this.$refs.loginFormRef.resetFields();
    },
    login() {
      //   如果返回的数据是premise对象 可以使用 async 和await 来简化对象
      this.$refs.loginFormRef.validate(async valid => {
        if (!valid) return;
        //通过解构赋值将data从返回的数据中结构出来 再赋值给res
        const { data: res } = await this.$http.post("login", this.loginForm);
        if (res.meta.status !== 200) return this.$message.error("登录失败");
        this.$message.success("登录成功");

        console.log(res);
        // 将token保存在sessionStorage里面
        window.sessionStorage.setItem("token", res.data.token);
        this.$router.push("/home");
        //  登录操作
        //  1.将登陆成功之后的token，保存到客户端的sessionStrong中
        //  1.1 项目中除了登录之外的其它api接口，必须在登录之后才能访问
        //  1.2 token 只应当在当前网站打开期间生效 所以将token 保存在sessionStorage中
        //  2.通过编程式导航条状到后台主页 路由地址是/hmoe
      });
    }
  }
};
</script>

// scoped防止组件样式冲突
<style lang="less" scoped>
.login {
  background-color: #7890a8;
  height: 100%;
}

.login-box {
  width: 450px;
  height: 300px;
  background-color: #ffffff;
  border-radius: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.avatar-box {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px solid #cccccc;
  padding: 10px;
  position: absolute;
  box-shadow: 0 0 10px #ddd;
  background-color: #fff;
  left: 50%;
  transform: translate(-50%, -50%);
  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #eeeeee;
  }
}

.login-form {
  width: 100%;
  position: absolute;
  padding: 0 20px;
  bottom: 0;
  box-sizing: border-box;
}
.btns {
  display: flex;
  justify-content: flex-end;
}

.login {
  background: radial-gradient(200% 100% at bottom center, #dd7a61, #9198e5);
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

@keyframes rotate {
  0% {
    transform: perspective(400) rotateZ(20deg) rotateX(-40deg) rotateY(0);
  }

  100% {
    transform: perspective(400) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
  }
}

.stars {
  transform: perspective(500px);
  transform-style: preserve-3d;
  //   position: absolute;
  perspective: 50% 100%;
  background-color: aliceblue;
  left: 0;
  animation: rotate 90s infinite linear;
  width: 100%;
  height: 100%;
  top: 0;
  position: relative;
}

.star {
  width: 2px;
  height: 2px;
  background-color: aqua;
  position: absolute;
  backface-visibility: hidden;
  top: 0;
  left: 0;
}
</style>